/** @jsxImportSource react */

import Prism from 'prismjs';

type HighlightProps = {
  code: string;
  lang?: string | undefined;
};

export default function Highlight({ code, lang }: HighlightProps) {
  const html = Prism.highlight(code, Prism.languages[lang || 'js'], lang || 'js');
  return (
    <div className="bg-kq-50 relative overflow-x-auto rounded">
      <code className="absolute text-kq-500 text-sm right-2 top-1 select-none">{lang}</code>
      <pre className="p-4">
        <code dangerouslySetInnerHTML={{ __html: html }} />
      </pre>
    </div>
  );
}
